<template>
  <div class="homepage">
    <div class="header">
      <Header></Header>
    </div>
    <div class="left">
      {{id}}
      <Left></Left>
    </div>
    <div class="right">
      <Right></Right>
    </div>
    <div class="bottom">
      <Bottom></Bottom>
    </div>
  </div>
</template>
<script>
import Header from './Header.vue'
import Left from './Left.vue'
import Right from './Right.vue'
import Bottom from './Bottom.vue'
import { v4 as uuidv4 } from 'uuid'
import InputParent from '../componentone/InputParent.vue'
export default {
  name: 'HomePage',
  components: {
    Header,
    Left,
    Right,
    Bottom,
    InputParent
  },
  data () {
    return {
      id: uuidv4()
    }
  }
}
</script>
<style scoped>
/* 此处的 div 可以依照情况替换成对应的元素名称 */

.homepage {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  /* flex 布局 */
  display: flex;
  /* 自动换行按照宽度 */
  flex-wrap: wrap;
}

.header {
  width: 100%;
  background: green;
}
.left {
  width: 30%;
  background: red;
}
.right {
  width: 70%;
  background: yellow;
}
.bottom {
  width: 100%;
  background: orange;
}
</style>
